import { View, Text, FlatList, RefreshControl, StyleSheet, ActivityIndicator, Image } from 'react-native'
import React, { useCallback, useState } from 'react'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

interface iCourse {
    id: string,
    title: string
}

const ZtList = () => {

    const DATA: iCourse[] = [
        {
            id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
            title: 'First Item',
        },
        {
            id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
            title: 'Second Item',
        },
        {
            id: '58694a0f-3da1-471f-bd96-145571e29d72',
            title: 'Third Item',
        },
        {
            id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28b1',
            title: 'First Item',
        },
        {
            id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f62',
            title: 'Second Item',
        },
        {
            id: '58694a0f-3da1-471f-bd96-145571e29d73',
            title: 'Third Item',
        },
        {
            id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28b4',
            title: 'First Item',
        },
        {
            id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f65',
            title: 'Second Item',
        },
        {
            id: '58694a0f-3da1-471f-bd96-145571e29d76',
            title: 'Third Item',
        },
        {
            id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28b7',
            title: 'First Item',
        },
        {
            id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f68',
            title: 'Second Item',
        },
        {
            id: '58694a0f-3da1-471f-bd96-145571e29d79',
            title: 'Third Item',
        },
    ];

    const renderItem = (item: iCourse) => {
        return (
            <View style={styles.item}>
                <Image  
                    style={{width: 150}}                  
                    source={{
                        uri: 'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
                    }}
                />
                <View>
                    <Text>ReactNative快速入门</Text>
                    <View>
                        <Text>作则</Text>
                        <Text>中级</Text>
                    </View>
                    <View>
                        <Text>价格</Text>
                        <Text>人数</Text>
                    </View>
                </View>
            </View>
        )
    }

    const [refreshing, setRefreshing] = useState(false);

    // 封装一个休眠函数
    const sleep = (waitTime: number) => {
        return new Promise((resolve, reject) => {
            setTimeout(resolve, waitTime);
        })
    }

    const onRefresh = useCallback(() => {
        setRefreshing(true);
        sleep(2000).then(() => {
            setRefreshing(false);
        })
    }, [])


    // 是否显示加载中... 
    const [loading, setLoading] = useState(false);

    const loadMore = useCallback(() => {
        setLoading(true);
        sleep(2000).then(() => {
            setLoading(false);
            console.log("加载完毕");
        })
    }, [])

    return (
        <SafeAreaView>
            <FlatList
                data={DATA}
                keyExtractor={item => item.id}
                renderItem={({ item }) => renderItem(item)}
                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
                ListFooterComponent={<ActivityIndicator size="large" color="#000" animating={loading} />}
                onEndReachedThreshold={0.2} // 当距离底部距离为屏幕高度的20%时触发onEndReached
                onEndReached={loadMore}
            >

            </FlatList>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    item: {
        display:"flex",
        flexDirection:"row",
        width:"100%",
        borderWidth:1,
        borderColor:"#ccc",
    }
})

export default ZtList